<template>
  <div class="login-box">
    <div class="loginbox-child">
      <h2 class="login-title">后台管理系统</h2>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" prefix-icon="iconfont icon-suoding" show-password></el-input>
        </el-form-item>
        <div class="bottombox">
          <el-button type="primary" @click="Login()">登录</el-button>
          <el-button type="info" @click="reset()">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { LoginApi } from "@/http/api";
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "您输入的字符要在5~20之间",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "您输入的字符要在5~20之间",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    reset() {
      this.$refs.ruleForm.resetFields();
    },
    Login() {
      this.$refs.ruleForm.validate(valid => {
        if(!valid) return;

        LoginApi(this.ruleForm).then(res => {
          console.log(res);
          this.$router.push('/index');
        });
      });
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background-color: #2b4b6b;

  .loginbox-child {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #fff;
    .bottombox {
      display: flex;
      justify-content: center;
    }
    .el-input {
      width: 300px;
    }
    .login-title {
      text-align: center;
    }
  }
}
</style>
